<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>曲线删除</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>

<body>
    <form class="layui-form" action="">

        <div class="layui-form" lay-filter="">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>曲线删除</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">曲线名称:</label>
                <div class="layui-input-inline" style="width:160px">
                    <select id="curvename" class="from-control" lay-filter="curvename" class="layui-select"
                        lay-search></select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">字段别名:</label>
                <div class="layui-input-inline" style="width: 160px;">
                    <input type="text" id="parametercn" autocomplete="off" readonly class="layui-input">
                </div>
                <div class="layui-input-inline" style="margin-top: 12px;">
                    <span id="curveinfo" style="font-size: 16px;"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">内部点颜色:</label>
                <div class="layui-input-inline" id="insidecolor"
                    style="width: 160px;height: 30px;border: 1px solid black;">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">最外点颜色:</label>
                <div class="layui-input-inline" id="outercolor"
                    style="width: 160px;height: 30px;border: 1px solid black;">
                </div>
            </div>
        </div>

    </form>
    <script type="text/javascript" src="../../jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script type="text/javascript" src="../../layui/public.js"></script>
    <script type="text/javascript" src="../../index.js"></script>
    <script type='text/javascript'>
        var $;
        var form;
        var dataslist;
        layui.use(['form'], function () {
            $ = layui.$;
            form = layui.form;

            //曲线名称的监听事件
            form.on('select(curvename)', function (data) {
                var vs = $("#curvename option:checked").val();
                for (var i = 0; i < dataslist.length; i++) {
                    if (vs == dataslist[i].curvename) {
                        $("#parameter").val(dataslist[i].parameter);
                        $("#parametercn").val(dataslist[i].parametercn);
                        document.getElementById("curveinfo").innerText = "(" + dataslist[i].tablename + ":" + dataslist[i].parameter + ")";
                        $("#insidecolor").css({ background: dataslist[i].insidecolor });
                        $("#outercolor").css({ background: dataslist[i].outercolor })
                    }
                }
            })
        });

        function CurveData(datas) {
            dataslist = datas;
            $("#curvename").empty();
            $("#curvename").append("<option value=''>请选择</option>")
            for (let i = 0; i < datas.length; i++) {
                $("#curvename").append("<option value=" + datas[i].curvename + ">" + datas[i].curvename + "</option>")
            }
            form.render();
        }
    </script>

</body>

</html>